<!doctype html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <title>Log System Demo</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css">
    <link href="https://cdn.bootcss.com/jquery-layout/1.4.3/layout-default.min.css" rel="stylesheet">
    <style type="text/css">
        html, body {
            background: #666;
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            overflow: auto; /* when page gets too small */
        }

        #container {
            background: #999;
            height: 100%;
            margin: 0 auto;
            width: 100%;
            _width: 700px; /* min-width for IE6 */
        }

        #tabs, .tabs-panel {
            height: 100%;
        }

        .pane {
            display: none; /* will appear when layout inits */
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-layout/1.4.3/jquery.layout.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#container').layout();
            var tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>";
            var tabs = $("#tabs").tabs();

            function addTab(key, title, url) {
                var id = "tabs-" + key,
                    li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, title));

                tabs.find(".ui-tabs-nav").append(li);
                tabs.append("<div id='" + id + "' class='tabs-panel'><iframe id='" + id + "' frameborder=0 marginheight=0 marginwidth=0 scrolling=no height='100%' width='100%' src='" + url + "'/></div>");
                tabs.tabs("refresh");
            }

            addTab("log", "Log", "/log.html");
            addTab("ownedFilter", "Owned Filter", "/owned.html");
            addTab("agent", "Agent", "/agent.html");
        });
    </script>
</head>
<body>
<div id="container">
    <div class="pane ui-layout-center">
        <div id="tabs">
            <ul>
                <li><a href="/interface.html">Interface</a></li>
            </ul>
        </div>
    </div>
    <div class="pane ui-layout-north">North</div>
    <div class="pane ui-layout-west">West</div>
</div>
</body>
</html>